<template>
  <div class="left">
    <div
      class="m-chart1"
      style="margin-bottom:10px;"
    >
      <el-form
        :inline="true"
        @keyup.enter.native="getDataList(true)"
      >
        <el-form-item>
          <el-date-picker
            v-model="queryParams.queryModel.displayTime"
            type="daterange"
            align="left"
            style="width:380px"
            unlink-panels
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="createTimePickerOptions"
            @change="dateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getDataList(true)"
          >
            查询
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-delete"
            @click="resetParams"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="m-healthl">
      <el-table
        ref="table"
        v-loading="dataListLoading"
        highlight-current-row
        border
        :header-cell-style="{background:'#E3F9F3',color:'#000',fontWeight:'bold',fontSize:'14px'}"
        :height="documentClientHeight - 210"
        :data="pageData.list"
        :default-sort="{prop: 'updateTime', order: 'ascending'}"
        style="width: 100%;"
      >
        <el-table-column
          prop="testerName"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="100"
          label="姓名"
        />
        <el-table-column
          prop="avatar"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="90"
          label="头像"
        >
          <template slot-scope="scope">
            <el-avatar
              :size="80"
              :src="scope.row.avatar"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="gender"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="90"
          label="性别"
        />
        <el-table-column
          prop="school"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="150"
          label="学校"
        />
        <el-table-column
          prop="grade"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="90"
          label="班级"
        >
          <template slot-scope="scope">
            {{ scope.row.gradeName }}{{ scope.row.className }}
          </template>
        </el-table-column>
        <el-table-column
          prop="itemCode"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="100"
          label="项目"
        >
          <template slot-scope="scope">
            {{ scope.row.itemCode }}
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="100"
          label="成绩"
        >
          <template slot-scope="scope">
            {{ scope.row.score }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="150"
          label="运动开始时间"
        />
        <el-table-column
          prop="endTime"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
          min-width="150"
          label="运动结束时间"
        />
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          min-width="90"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="isAuth('sport:sportapi:update')"
              type="text"
              style="padding:0;"
              @click="updateHandle(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryParams.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        :total="pageData.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>
  </div>
</template>

<script>
import { clearLoginInfo, initQueryParams } from '@/utils'
import { dateSelectShorts } from '@/utils/common'
export default {
  data() {
    return {
      dialog: {
        isVisible: false,
        type: 'add'
      },
      queryParams: initQueryParams(),
      pageData: {
        totalCount: 0,
        list: [],
        extData: {}
      },
      dataListLoading: false,
      btnLoading: false,
      pageLoading: false,
      updatePassowrdVisible: false,
      createTimePickerOptions: {
        shortcuts: dateSelectShorts()
      }
    }
  },
  computed: {
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight -20 },
      set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    },
    documentClientWidth: {
      get () { return this.$store.state.common.documentClientWidth },
      set (val) { this.$store.commit('common/updateDocumentClientWidth', val) }
    },
    userId: {
      get() { return this.$store.state.user.id },
      set(val) { this.$store.commit('user/updateId', val) }
    },
    userName: {
      get() { return this.$store.state.user.name },
      set(val) { this.$store.commit('user/updateName', val) }
    },
    userTel: {
      get() { return this.$store.state.user.tel },
      set(val) { this.$store.commit('user/updateTel', val) }
    },
    userMobile: {
      get() { return this.$store.state.user.mobile },
      set(val) { this.$store.commit('user/updateMobile', val) }
    },
    userDeptId: {
      get() { return this.$store.state.user.deptId },
      set(val) { this.$store.commit('user/updateDeptId', val) }
    },
    userDeptName: {
      get() { return this.$store.state.user.deptName },
      set(val) { this.$store.commit('user/updateDeptName', val) }
    },
    userType: {
      get() { return this.$store.state.user.userType },
      set(val) { this.$store.commit('user/updateUserType', val) }
    }
  },
  created() {
  },
  mounted () {
    this.getUserInfo()
    this.resetDocumentClientHeight()
    this.resetDocumentClientWidth()
    window.addEventListener('scroll', this.onScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.onScroll)
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['table'].doLayout()
    })
  },
  methods: {
    resetParams() {
      this.queryParams = initQueryParams()
      this.getDataList(true)
    },
    // 获取数据列表
    getDataList (isReload) {
      if (isReload) {
        this.queryParams.pageNo = 1
      }
      this.queryParams.type = 3
      this.dataListLoading = true
      this.$http({
        url: this.$http.requestUrl('/sport/sportapi/list'),
        method: 'get',
        params: this.$http.requestParams(this.queryParams)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.pageData = data.page
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.queryParams.pageSize = val
      this.queryParams.pageNo = 1
      this.getDataList(false)
    },
    // 当前页
    currentChangeHandle (val) {
      this.queryParams.pageNo = val
      this.getDataList(false)
    },
    // 排序
    sortChange: function (column) {
      if (column.order === 'descending') {
        this.queryParams.sort = column.prop + ' desc'
      } else if (column.order === 'ascending') {
        this.queryParams.sort = column.prop + ' asc'
      }
      this.getDataList(true)
    },
    onScroll() {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    },
    // 重置窗口可视高度
    resetDocumentClientHeight () {
      this.documentClientHeight = document.documentElement['clientHeight']
      window.onresize = () => {
        this.documentClientHeight = document.documentElement['clientHeight']
      }
    },
    // 重置窗口可视宽度
    resetDocumentClientWidth () {
      this.documentClientWidth = document.documentElement['clientWidth']
      window.onresize = () => {
        this.documentClientWidth = document.documentElement['clientWidth']
      }
    },
    // 获取当前用户
    getUserInfo() {
      this.$http({
        url: this.$http.requestUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.requestParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userId = data.user.userId
          this.userName = data.user.userName
          this.userTel = data.user.tel
          this.userMobile = data.user.mobile
          this.userDeptId = data.user.deptId
          this.userDeptName = data.user.deptName
          this.userType = data.user.userType
          this.getDataList(true)
        }
      })
    },
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 退出
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.requestUrl('/sys/logout'),
          method: 'post',
          data: this.$http.requestData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            clearLoginInfo()
            this.$router.push({ name: 'login' })
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
<style src="@/assets/scss/stu.scss" lang="scss" scoped></style>
